<template>
    <div style="height: 90%;">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 订单管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/indentmaintain' }">维修订单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="big-bg">
            <!-- 表单控件 -->
            <div class="from">
                <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">

                    <el-form-item label="订单信息:" prop="input_info" class="m_right">
                        <el-input placeholder="手机号、订单号" v-model="formInline.input_info" clearable></el-input>
                    </el-form-item>


                    <el-form-item label="订单状态:" prop="order_state" class="m_right">
                        <el-select v-model="formInline.order_state" placeholder="全部">
                            <el-option label="全部" value="0"></el-option>
                            <el-option v-for="(el, index) in formInline.stateArr" :label='el'
                                :value="index + 1"></el-option>
                        </el-select>
                    </el-form-item>



                    <el-form-item label="订单时间:" prop="date" class="m_right">
                        <div class="block">
                            <el-date-picker value-format="yyyy-MM-dd" unlink-panels v-model="formInline.date"
                                type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间">
                            </el-date-picker>
                        </div>
                    </el-form-item>


                    <br>

                    <el-button type="primary" @click="filter()">筛选</el-button>


                    <el-button type="text" class="m_right" @click="resetFrom('formInline')">清空筛选条件</el-button>

                    <el-button type="primary" class="m_ right">导出订单</el-button>

                </el-form>
            </div>


            <!-- 表格 -->
            <el-table :data="tableDate" border max-height="300">
                <el-table-column fixed prop="id" label="订单编号" align="center">
                </el-table-column>

                <el-table-column prop="sid" label="服务编号" align="center">
                </el-table-column>

                <el-table-column prop="serviceitem" label="服务名称" align="center">
                </el-table-column>

                <el-table-column label="买家" align="center">
                    <template slot-scope="scope">
                        <p>{{ scope.row.username }}</p>
                        <p>{{ scope.row.phone }}</p>
                    </template>
                </el-table-column>

                <el-table-column prop="name" label="商家" align="center">
                </el-table-column>

                <el-table-column label="价格" align="center">
                    <template slot-scope="scope">
                        <p>原价: {{ scope.row.originalprice }}</p>
                        <p>优惠: {{ scope.row.price }}</p>
                        <p>现价: {{ scope.row.presentprice }}</p>
                    </template>
                </el-table-column>

                <el-table-column prop="state" label="订单状态" align="center">
                </el-table-column>

                <el-table-column prop="predate" label="预约时间" align="center">
                </el-table-column>

                <el-table-column prop="pladate" label="下单时间" align="center">
                </el-table-column>

                <el-table-column label="操作" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="openDetails(scope.row.id)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination background :current-page="params.pageNum" :page-sizes="[1, 3, 5, 10]"
                :page-size="params.pageSize" layout="sizes, prev, pager, next" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" align="right">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import tool from './tool'

export default {
    data() {
        return {
            // 表单
            formInline: {
                // 输入框
                input_info: '',
                // 下拉框
                order_state: '',
                //状态数据
                stateArr: [],
                // 日期
                date: '',
            },

            // 参数
            params: {
                state: 0,   //对应状态的订单
                text: '',    //订单编号
                typeid: 2,    //洗车类型
                starttime: '',    //开始时间
                endtime: '',     //结束时间
                pageNum: 1,    //当前页
                pageSize: 3    //一页几条数据
            },

            // 表格
            tableDate: [],
            total: 4
        };
    },
    mounted() {
        //表格数据初始化
        this.tableInit()

        //状态下拉框初始化
        this.stateInit()

    },
    methods: {
        //改变表格数据
        async tableInit() {
            let result = await tool.select(this.params);
            this.tableDate = result[0];
            this.total = Number(result[1]);
            // console.log(result[0]);
        },

        //获取下拉框状态
        async stateInit() {
            let state_info = await tool.getState();  //接收状态数组
            //过滤状态
            let _this = this
            state_info.forEach(function (val) {
                _this.formInline.stateArr.push(val.dicname);
            });
            // console.log(_this.formInline.stateArr);
        },

        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            //回到第一页
            this.params.pageNum = 1;
            this.params.pageSize = val;
            this.tableInit()
        },

        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.params.pageNum = val;
            this.tableInit()
        },

        //清空表单
        resetFrom(formInline) {
            // console.log(this.formInline);
            this.$refs[formInline].resetFields();
            this.filter()
        },

        // 筛选
      async  filter() {
            // console.log(this.formInline);
            //回到第一页
            this.params.pageNum = 1;
            // 改变相关参数
            this.params.state = this.formInline.order_state;
            this.params.text = this.formInline.input_info;
            // 处理时间
            if (this.formInline.date.length > 1) {
                this.params.starttime = this.formInline.date[0] + ' ' + '00:00';
                this.params.endtime = this.formInline.date[1] + ' ' + '00:00';
            } else {
                this.params.starttime = '';
                this.params.endtime = '';
            }
            // console.log(this.formInline.date);

            // 重载表格
            let result = await tool.select(this.params);
            this.tableDate = result[0];
            this.total = Number(result[1]);
            if (this.total) {
                this.$message({ message: '查询成功', type: 'success' })
            } else {
                this.$message({ message: '查询失败', type: 'error' })
            }
        },

        //详情页
        openDetails(id) {
            // console.log(id);
            this.$router.push({ path: '/orderdetails', query: { id } })
        }
    }
};
</script>

<style scoped>
.title {
    font-weight: bolder;
    padding: 20px 0;
}

.big-bg {
    background-color: #fff;
    height: 88%;
    padding: 0 30px;
    padding-top: 30px;
}

.from {
    background-color: #F5F5F5;
    padding: 20px 20px;
    box-sizing: border-box;
    margin-bottom: 40px;
}

.m_right {
    margin-right: 50px;
}
</style>
